<template>
	<view class="active-goods-details">
		<phoneSimuHead :titleTxt="titleTxt" :isShow="true"></phoneSimuHead>
		<view class="share-msg-avatar">
			<view class="share-msg-box">
				<view class="m-box">
					<view class="t-txt"  @click.stop="edit({act:action.editActiveTitle,data:{}}); curEditId=action.editActiveTitle">{{titleTxt}}</view>
					<view class="m-txt"  @click.stop="edit({act:action.edidShareContext,data:{}}); curEditId=action.edidShareContext">{{shareTxt}}</view>
				</view>
				<view class="img-box">
					<image class="img-b" 
						@click.stop="edit({act:action.edidShareImg,data:{}}); curEditId=action.edidShareImg"
						:src="shareImg"></image>
				</view>
				
				<view class="arrow-box">
					
				</view>
				
			</view>
			<view class="avatar-box">
				<image class="img-a" src="https://cdn.imiyun.com/d/cp100/goods/e39f13831516d82d521661acd2a096e6.jpeg?x-oss-process=image/resize,m_lfit,w_480"></image>
			</view>
			
			<view class="tit-line" v-if="curEditId==action.editActiveTitle"></view>
			<view class="txt-line" v-if="curEditId==action.edidShareContext"></view>
			<view class="img-line" v-if="curEditId==action.edidShareImg"></view>
			
		</view>
		<view class="b-img-box">
			<image class="img" src="../../../static/images/wx-input-pic.png"></image> 
		</view>
	</view>
</template>

<script>
	import phoneSimuHead from "@/components/interactive/appComponrnts/phone-simulation-head.vue";
	import editInteractive from "@/js/inieractive/EditInteractive.js";
	export default{
		components:{phoneSimuHead},
		data(){
			return{
				action:editInteractive.action,
				curEditId:"",
				titleTxt:"",
				shareImg:"https://cdn.imiyun.com/d/cp100/goods/f6f23d73b221ad8f2a16c8c1a1718321.jpeg?x-oss-process=image/resize,m_lfit,w_480",
				shareTxt:"Lorem ipsum dolor sit amet, consectetur adipiscing",
			}
		},
		created() {
			uni.$on('init_active_title',(data)=>{
				this.titleTxt = data;
			});
		},
		
		mounted() {
			
		},
		
		methods: {
			edit(data)
			{
				editInteractive.eidt(data);
			},
			update(data)
			{
				if(data.act == this.action.edidShareImg)
				{
					this.shareImg = data.data;
				}
				if(data.act == this.action.edidShareContext)
				{
					this.shareTxt = data.data;
				}
				
			}
		},
	}
</script>

<style lang="scss">
	.active-goods-details
	{
		width: 100%;
		height: 100%;
		position: relative;
	
		.share-msg-avatar
		{
			padding: 20px;
			display: flex;
			width: calc(100% - 40px);
			position: relative;
			.dashed-line
			{
				border: 1px #000 dashed;
				padding: 0 10px;
			}
			
			.tit-line
			{
				border: 1px #000 dashed;
				position: absolute;
				top:26px;
				left: 25px;
				height: 30px;
				width: 174px;
			}
			
			.txt-line
			{
				border: 1px #000 dashed;
				position: absolute;
				top:57px;
				left: 25px;
				height: 40px;
				width: 174px;
			}
			
			.img-line
			{
				border: 1px #000 dashed;
				position: absolute;
				top:50px;
				left: 200px;
				height: 60px;
				width: 60px;
			}
			
			.share-msg-box
			{
				border: 1px solid #EEE;
				background-color: #FFF;
				display: flex;
				width: calc(100% - 105px) ;
				height: 80px;
				padding: 10px;
				border-radius: 5px;
				position: relative;

				.m-box
				{
					width: 200px;
					height: 20px ;
					cursor: pointer;
					.t-txt
					{
						color: #333;
						font-size: 14px;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space:nowrap;
						width: 168px;
					}
					.m-txt
					{
						color: #999;
						width: 168px;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;

						display: -moz-box;
						-moz-line-clamp: 2;
						-moz-box-orient: vertical;

						overflow-wrap: break-word;
						word-break: break-all;
						white-space: normal;
						overflow: hidden;
					}
				}
				
				.img-box
				{
					height: 60px;
					width: 60px;
					padding-top: 20px;
					
					image
					{
						height: 100%;
						width: 100%;
						min-width: 60px;
						cursor: pointer;
					}
				}
				
				.arrow-box
				{
					height: 10px;
					width: 10px;
					border-top: 1px #EEE solid;
					border-right: 1px #EEE solid;
					background-color: #FFF;
					transform: rotate(45deg);
					position: absolute;
					top:14px;
					right: -7px;
				}
			}
			
			.avatar-box
			{
				width: 60px;
				height: 60px;
				padding-left: 20px;
				
				image
				{
					height: 100%;
					width: 100%;
					min-width: 60px;
					border-radius: 4px;
					overflow: hidden;
				}
			}
		}
		
		.b-img-box
		{
			width: 100%;
			position: absolute;
			bottom: 0;
			height: 49px;
			.img
			{
				width: 100%;
				height: 100%;
			}
		}
		
		
	}
</style>